<template>
  <div class="Home">
    <blog-header></blog-header>
    <el-button class="btn" @click="blogLogout">注销登录</el-button>
    <h2 class="blogtitle">某个时刻，把你的骄傲狠狠的踩到地上，任其开成花或者烂成泥。</h2>
    <h4 class="blogPrompt">点击上面那个长的不太好看的Chestnut吧！</h4>
    <blog-drawor></blog-drawor>
         <login-footer></login-footer>
  </div>
</template>
<script>
import blogHeader from './blogHeader.vue'
import blogDrawor from './blogDrawor.vue'
import loginFooter from './loginFooter.vue'
export default {
  name: 'Home',
  components: { blogHeader, blogDrawor, loginFooter },
  data () {
    return {

    }
  },
  methods: {
    // 注销登录
    blogLogout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
      this.$message.success('注销登录成功！')
    }
  }
}
</script>

<style lang="less" scoped>

.blogPrompt {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
}
.blogtitle {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn {
    position: absolute;
    top: 10px;
    right: 30px;
    background-color: rgb(151, 151, 151);
    color: #fff;
}
</style>
